import "./index.less";

import { ceil } from "lodash";

const host = "https://jx-yxdj.chinaums.com/bykj";

// data 数据源
export const List = ({ data = [] }) => {
  
  return (
    <div className="common-list">
      {data.map((item, index) => (
        <div key={index} className="list-item">
          {/* 顶部信息 */}
          <div className="list-header">
            <div className="merchant-info">
              <div className="merchant-logo">
                <div className="logo-container">
                  <img src={`${host}${item.logo}`} width={60} height={60} alt="logo" />
                </div>
              </div>
              <div className="merchant-details">
                <div className="store-name">{item?.sellerName || ""}</div>
                <div className="transaction-date">
                  {item?.orderTime || "--"}
                </div>
              </div>
            </div>
            <div className="category-tag">{"线下商超"}</div>
          </div>

          {/* 底部交易详情 */}
          <div className="transaction-details">
            <div className="detail-item">
              <div className="detail-label">会员折扣</div>
              <div className="detail-value">{`${
                (item?.memberDiscount || 0) * 100
              }折`}</div>
            </div>
            <div className="detail-item">
              <div className="detail-label">本单支付</div>
              <div className="detail-value">¥{item?.payMoney || "--"}</div>
            </div>
            <div className="detail-item savings">
              <div className="detail-label">本单省钱</div>
              <div className="detail-value savings-amount">
                ¥{ceil(item?.orderAmt - item?.payMoney,4).toFixed(2) || "--"}
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};
